1小时解决在浏览器中所有与excel相关的需求（内含exceljs实战） |
您所在的位置：网站首页 › pc wap app › 1小时解决在浏览器中所有与excel相关的需求（内含exceljs实战） |
1小时解决在浏览器中所有与excel相关的需求（内含exceljs实战）
|
从小我们都有一个共识，假如在电脑中打开一个特定类型的文件，最起码得下载一个相关的软件才能打开。比如excel就是其中之一。但浏览器逐渐发展起来，慢慢变成更多的文件格式都在直接在浏览器中预览编辑。假如我们接到了一个需要在前端处理excel表格数据上传、下载或者预览编辑的需求，有需要做哪些工作呢？ 以下是比较常见的四种需求的实现思路： 1.实现在浏览器端的在线excel：此类需求大致需要实现原生excel的所有常用功能，能导入导出，增删改查，界面样式和部分扩展功能最好也能够实现。 这种情况最好是使用现成的完整的库。目前没有找到开源且功能齐全的，建议使用付费的库进行制作，也比较方便后续的维护。在这简单地列举一下比较常见的几种： spreadsheet :较为清新，该有的都有，可自行研究。 Handsontable:JS实现的spreadsheets评分最高的库。石墨文档的excel部分有使用到此库。基础版本免费，部分高级功能比如导出到excel要用到收费的商业版本。 SpreadJS：样式和微软的以前的一个版本的很像，功能齐全，国内有代理公司。 2.只需读取excel内容进行预览：这种情况的话主要是一些需要导入excel文件，并进行实时预览。类似包括预览word、pdf等格式文件都可使用此类方法进行解决。 微软在线预览：直接通过调用微软的在线预览功能，并插入iframe实现。预览前提是你的资源必须是公共可访问的。缺点是预览速度很慢且大文件无法进行预览。 //将iframe的src设置为http://view.officeapps.live.com/op/view.aspx?src=你的在线下载excel的地址 //需要对excel地址进行encodeURI处理，示例如下 复制代码百度文档服务：类似的也有其他网站的文档服务，可供office、wps等格式文档的存储、转码、分发能力，同时满足PC、WAP、APP多端的文档在线浏览需求，可自行搜索了解。 私有化部署相关(wopi) apps： 整体使用类似于上面的微软在线预览，但是需要自己将office web部署至自己的服务器，并进行相关的配置。转换文档需要两台服务器，一台为转换server，另外一台为域控server。并且服务器系统要求为Windows。有需要的可自行了解。 3.需定制化读取、显示和操作数据：此需求为需要导入excel文件，然后读取excel的相关数据和样式，再进行我们想要的格式显示的出来。 比如读取某些固定位置的数据进行计算，以及读取相关位置的数据样式显示至自己需要的表格等地方。 正常来说应该是由后端读取解析所有需要用来展示的excel数据，前端再调用返回的数据生成样式。那这样子就还得经过后端处理才能对excel进行解析，多了一层步骤。 但其实纯前端也有实现方式。对比了当前开源库的解决方案之后，目前比较倾向于使用ExcelJS进行实现。这个库几乎可以将所有日常excel需要的数据及样式都读取出来在前端使用。以下是我用ExcelJS实现的纯前端的excel导入。仓库地址点这里 假如在wps打开excel的时候，内容如下图所示 然后在我的项目中上传excel文件，即可实现在浏览器对excel文件进行预览。 点击不同的单元格即可显示单元格的内容，还支持页面放大缩小功能
但是由于官方文档对导入数据处理的欠缺，在解析excel数据也产生了很多的问题 官方文档中导入的操作有三种，实测从浏览器端上传文件，可用buffer类型的读取解析出数据。具体操作就是你先写好上传文件的控件，再根据返回的数据进行转换。 //省略部分代码，记得安装好ExcelJS在你的项目中 import Excel from "exceljs"; getUploadData(e){ let fileData = e.target.files[0] let reader = new FileReader() reader.readAsArrayBuffer(fileData) reader.onloadend = e => { let data = new Uint8Array(e.target.result) this.workbook = new Excel.Workbook() this.workbook.xlsx.load(data).then(() => { //this.workbook为excel文件的整体数据 if(this.workbook._themes.theme1){ this.workbook.eachSheet(worksheet => { //这里的worksheet就是我们所需要读取的每个表的数据 }) } else{ /* 默认能读到主题的excel才算解析成功，否则为错误格式 主题的含义下面再解释。*/ this.$Messgae.error('文件格式有误，无法解析') } }) } } 复制代码在主要这里要获取到excel文件的整体数据、以及文件里每个sheet的数据。 导入之后看到我们查看每个表的数据。excel主要的数据都在model这个属性里面。 model属性里面的cols就是我们的列宽数据，rows就是我们每一行的数据。所有单元格的具体数据样式也在rows里面 rows就是我们每一行的数据，包括每个格子的数据也在里面。我们如果需要生成一个类似于表格形式的展示页面，需要用到一下数据 每一行的宽度和高度 每个格子的内容、样式。包括每条边的颜色、宽度、是虚线还是直线等。这些统统在官方文档都没找到解释。如果需要更多的数据只好自己一步步筛查属性在哪里了。我在仓库代码里面已经对excel的高宽、样式、合并单元格、默认样式表的xml格式转换、不同数据格式的内容，进行了处理，具体详情可以查看源码。 上面的演示只是一个demo，excel的数据格式较为丰富且多变，很多情况都没有进行处理的，如果需要进行扩展的话最好还是修补一下代码哦。 4.直接用JS将需要的数据导出excel的格式：这个需求一般都是用于对相关表格或统计的数据进行直接导出。比如将一个自己制作的前端表格组件库，导出成excel文件在浏览器进行下载，即可使用上面介绍的ExcelJS。直接在代码中导入创建一个数据对象，操作一番即可导出。具体可以参考官方文档，有直接导出该如何处理的详细解释。 //这里只是一个最简单的DEMO，具体样式都可以在官方文档一个个找到的，这里就不赘述了。 //file-saver是一个用来下载文件的库 import { saveAs } from "file-saver"; import Excel from "exceljs"; var workbook = new Excel.Workbook(); var worksheet = workbook.addWorksheet('My Sheet'); worksheet.columns = [ { header: 'Id', key: 'id', width: 10 }, { header: 'Name', key: 'name', width: 32 }, { header: 'D.O.B.', key: 'DOB', width: 10, outlineLevel: 1 } ]; worksheet.addRow({id: 1, name: 'John Doe', dob: new Date(1970,1,1)}); worksheet.addRow({id: 2, name: 'Jane Doe', dob: new Date(1965,1,7)}); workbook.xlsx.writeBuffer().then(buffer => { // done saveAs(new Blob([buffer]), `${Date.now()}_feedback.xlsx`); }); 复制代码上面代码执行完就会执行浏览器的下载文件功能，打开下载后的excel，就能看到以下内容了： 文章要是有什么错误的地方也希望大家补充指正。感谢感谢。觉得有不清楚的地方可以问我噢，喜欢的话就点个赞哈。 |
【本文地址】